<template>
  <div class="app-container">
    <div class="demo-input-size demo-input search_module">
      <el-form :model="search" ref="search" :inline="true" size="small">
        <div class="search_btns">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchbtn">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
        <div class="search_items">
          <el-form-item label="型号：" prop="Name">
            <el-input placeholder="请输入型号" autocomplete="on" v-model.trim="search.Name"></el-input>
          </el-form-item>
        </div>

      </el-form>
    </div>
    <el-form size="small" style="margin:0 10px;">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table border :data="list"  :height="tableHeight" v-loading="listLoading" @selection-change="handleSelectionChange">
        <el-table-column label="型号编号" align="center" prop="ID" />
        <el-table-column label="型号名称" align="center" prop="PartNumber" />
        <el-table-column label="品牌" align="center" prop="Brand" />
        <el-table-column label="可替换型号" align="center" prop="ReplacePartNumber" />
        <el-table-column label="替换品牌" align="center" prop="ReplaceBrand" />
        <el-table-column label="替换类型" align="center" prop="RelationTypeName" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagebox">
        <pagination v-show="total > 0" :total="total" :page.sync="search.pageIndex" :limit.sync="search.pageSize" @pagination="getlist" />
      </div>
    </div>
    <div>
      <el-dialog title="型号替换维护" :visible.sync="open" @close="handleClose" :close-on-click-modal="false" append-to-body>
        <el-form ref="Relationform" label-width="180px" :rules="rules" :model="model" label-suffix=":">
          <el-form-item label="型号名称" prop="ProductID">
            <el-select style="width:70%;" size="medium" v-model="model.ProductID" placeholder="请输入型号名称" filterable remote reserve-keyword :remote-method="getpartNumberOption" clearable>
              <el-option v-for="dict in partNumberOptions" :key="dict.ProductID" :value="dict.ProductID" :label="dict.PartNumber" />
            </el-select>
          </el-form-item>
          <el-form-item label="可替换型号" prop="RelationID">
            <el-select style="width:70%;" size="medium" v-model="model.RelationID" placeholder="请选择可替换型号" filterable remote reserve-keyword :remote-method="getrelationOptions" clearable>
              <el-option v-for="dict in relationOptions" :key="dict.ProductID" :value="dict.ProductID" :label="dict.PartNumber" />
            </el-select>
          </el-form-item>
          <el-form-item label="关联类型" prop="RelationType">
            <hn-dictionary style="width:70%;" size="medium" systemName="标准库" term="型号替换类型" v-model="model.RelationType" :placeholder="'请选择类型'"></hn-dictionary>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align:right">
          <el-button size="medium" @click="handleClose">取 消</el-button>
          <el-button size="medium" type="primary" @click="save">关 联</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { getList, save, remove, getOption } from '../../api/replacementpool'; //引入api 的接口
import {getEnumerate } from '../../api/category.js';
export default {
  data() {
    return {
      list: null,
      formLabelWidth: '120px',
      listLoading: true,
      open: false,
      total: 0,
      search: {
        PageIndex: 1,
        PageSize: 20,
        Name: undefined
      },
      model: {},
      ids: [], // 选中数组
      ProductRelatioType: [], // 关联类型
      partNumberOptions: [],
      relationOptions: [],
      rules: {
        ProductID: [{ required: true, message: '请选择型号', trigger: 'change' }],
        RelationID: [{ required: true, message: '请选择关联型号', trigger: 'change' }],
        RelationType: [{ required: true, message: '请选择关联类型', trigger: 'change' }]
      },

      tableHeight: window.innerHeight - 350 //自适应高度
    };
  },
  created() {
    this.getlist();
    getEnumerate(['ProductRelatioType']).then(res => {
      this.ProductRelatioType = res.data.ProductRelatioType;
    });
  },
  mounted() {
    //组件加载完后执行
  },
  methods: {
    //方法，事件
    getlist() {
      getList(this.search).then(res => {
        this.list = res.data.Rows;
        this.total = res.data.Total;
        this.listLoading = false;
      });
    },
    /** 搜索 */
    searchbtn() {
      this.getlist();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['search'].resetFields();
      this.searchbtn();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID);
    },
    add() {
      this.open = true;
    },
    handleClose() {
      this.resetForm('Relationform');
      this.open = false;
    },
    save() {
      this.$refs['Relationform'].validate(valid => {
        if (valid) {
          if (this.model.RelationID == this.model.ProductID) {
            this.msgError('相同品牌不能绑定！');
            return false;
          }
          this.listLoading = true;
          save(this.model).then(res => {
            if (res.success) {
              this.msgSuccess('操作成功!');
              this.getlist();
              this.handleClose();
            } else {
              this.msgError(res.data);
            }
            this.listLoading = false;
          });
        }
      });
    },
    getpartNumberOption(key) {
      if (key) {
        getOption(key).then(res => {
          this.partNumberOptions = res.data;
        });
      } else {
        this.partNumberOptions = [];
      }
    },
    getrelationOptions(key) {
      if (key) {
        getOption(key).then(res => {
          this.relationOptions = res.data;
        });
      } else {
        this.relationOptions = [];
      }
    }, //删除
    handleDelete(ID) {
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(ID).then(res => {
          if (res.success) {
            this.msgSuccess('操作成功!');
            this.getlist();
          } else {
            his.msgError(res.data);
          }
        });
      });
    }
  }
};
</script>
<style scoped>
.demo-input .el-input,
.el-select {
  width: 180px;
  margin-right: 10px;
}
.demo-input {
  font: 15px Small;
}

.el-left {
  float: right;
}
/* .tablehight{
  width: 100%;
  height:calc(100vh - 350px);
  overflow:auto;
} */
.pagebox{
  text-align: right;
}
.pagebox .pagination-container{
padding: 0 !important;
}
</style>